import React from 'react';
import { Card, Button, message, Divider, Typography, Avatar } from 'antd';
import { UserOutlined, LogoutOutlined, EditOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useUserStore } from '@store/userStore';

const { Title, Paragraph, Text } = Typography;

const UserProfile: React.FC = () => {
  const navigate = useNavigate();
  const { isLoggedIn, userInfo, login, logout, updateUserInfo } = useUserStore();

  // 处理登录
  const handleLogin = () => {
    if (isLoggedIn) {
      message.warning('用户已经登录');
      return;
    }
    
    login({
      id: '1',
      name: '系统管理员',
      role: 'admin'
    });
    message.success('登录成功');
  };

  // 处理登出
  const handleLogout = () => {
    if (!isLoggedIn) {
      message.warning('用户未登录');
      return;
    }
    
    logout();
    message.success('退出登录成功');
  };

  // 处理更新用户信息
  const handleUpdateInfo = () => {
    if (!isLoggedIn) {
      message.warning('请先登录');
      return;
    }
    
    updateUserInfo({
      name: '超级管理员',
      role: 'superadmin'
    });
    message.success('用户信息更新成功');
  };

  // 导航回首页
  const handleBackToHome = () => {
    navigate('/home');
  };

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2}>用户个人资料</Title>
      <Paragraph>本页面演示了使用 Valtio 进行状态管理的功能。</Paragraph>
      <Divider />
      
      {isLoggedIn ? (
        <>
          <Card 
            title="用户信息" 
            style={{ marginBottom: '24px' }}
            actions={[
              <Button key="edit" icon={<EditOutlined />} onClick={handleUpdateInfo}>
                更新信息
              </Button>,
              <Button key="logout" icon={<LogoutOutlined />} danger onClick={handleLogout}>
                退出登录
              </Button>
            ]}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '24px' }}>
              <Avatar size={64} icon={<UserOutlined />} style={{ backgroundColor: '#1890ff' }} />
              <div>
                <Title level={4} style={{ margin: 0 }}>{userInfo.name}</Title>
                <Text type="secondary">角色：{userInfo.role}</Text>
              </div>
            </div>
            
            <div style={{ lineHeight: '2' }}>
              <p><strong>用户ID：</strong>{userInfo.id}</p>
              <p><strong>登录状态：</strong><Text type="success">已登录</Text></p>
              <p><strong>角色权限：</strong>{userInfo.role === 'admin' ? '管理员' : '超级管理员'}</p>
            </div>
          </Card>
        </>
      ) : (
        <Card title="用户未登录" style={{ marginBottom: '24px' }}>
          <p style={{ textAlign: 'center', padding: '40px 0' }}>
            <Text type="warning">请先登录以查看用户信息</Text>
          </p>
          <div style={{ textAlign: 'center' }}>
            <Button type="primary" size="large" onClick={handleLogin}>
              登录系统
            </Button>
          </div>
        </Card>
      )}
      
      <div style={{ marginTop: '24px', textAlign: 'center' }}>
        <Button onClick={handleBackToHome}>返回首页</Button>
      </div>
    </div>
  );
};

export default UserProfile;